<template>
  <div class="order">
    <n-form label-placement="left">
      <n-row :gutter="24">
        <n-col :span="5">
          <n-form-item label="订单状态">
            <n-select v-model:value="query.order_status" :options="selectOptions"></n-select>
          </n-form-item>
        </n-col>
        <n-col :span="5">
          <n-form-item>
            <n-button type="info" @click="handleSearch">查询</n-button>
          </n-form-item>
        </n-col>
      </n-row>
    </n-form>
    <br/>
    <n-data-table
        :columns="columns"
        max-height="750px"
        size="small"
        :data="data"
    ></n-data-table>
  </div>
</template>

<script lang="ts">
export default {
  name: "order"
}
</script>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue"
import {orderColumns, OrderQuery, orderSelectOptions, OrderTableData} from '@/view/order/order/order'
import type { SelectOption} from "naive-ui"
import {sms_order_queryList} from '@/api/sms'
import useMsg from '@/hooks/useMsg'

const {success} = useMsg()

const query = reactive<OrderQuery>({
  order_status: ""
})

const data = ref<OrderTableData[]>([])
const columns = orderColumns(() => {
  success("发货成功")
  getList()
})
const selectOptions:SelectOption = orderSelectOptions
function getList() {
  sms_order_queryList(query).then(res => {
    if (res.code === 200) {
      data.value = res.data
    }
  })
}

const handleSearch = () => {
  getList()
}

onMounted( () => {
  getList()
} )
</script>

<style scoped lang="scss">

</style>
